<template>
    <div class="container-fluid">
        <div class="row mb-1">
            <div class="col-3">
                <el-input placeholder="请输入用户id" v-model.lazy="ruleForm.ID">
                </el-input>
            </div>
            <div class="col-3">
                <el-date-picker v-model="ruleForm.createdAt" clearable type="daterange" range-separator="To"
                    start-placeholder="开始时间" end-placeholder="结束时间" />
            </div>

        </div>
        <div class="row mb-1">
            <div class="col">
                <el-button @click="start" type="primary">查询</el-button>
            </div>
        </div>
        <div class="row mb-1">
            <div class="col">
                <el-table border :data="tableData" height="65vh" style="width: 100%" @sort-change="sortchange">
                    <el-table-column prop="ID" label="ID"></el-table-column>
                    <el-table-column prop="user.name" label="标题"></el-table-column>
                    <el-table-column prop="context" label="内容"></el-table-column>
                    <el-table-column prop="image" label="图片">
                    </el-table-column>
                    <el-table-column prop="createdAt" sortable="custom" :formatter="({ createdAt }) => formatter(createdAt)"
                        label="提交时间"></el-table-column>
                </el-table>
            </div>
        </div>
        <div class="row mb-1">
            <div class="col">
                <el-pagination :hide-on-single-page="true" @current-change="handleCurrentChange" :page-size="20"
                    layout="prev, pager, next" :total="count"></el-pagination>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ElMessage, ElMessageBox } from "element-plus";
import { toLocaleDateString } from "../../../util/time";
import { forEach } from 'lodash-es'
import {
    asynccreatesigninactivity,
    asyncdelsigninactivity,
    asyncselectsignin,
} from "../../../api/index";
import Studycodemodel from '../../../mysql_interface/studycodemodel';
import { onMounted, reactive, ref } from "vue";

const dialogVisible = ref(false)
const count = ref(0)
const tableData = ref<Studycodemodel.Iteamsignin[]>([])
const rules = []
const dialogVisible2 = ref(false)
const offset = ref(0)
const like = ref('')
const p = defineProps<{ ID: number }>()

const ruleForm = reactive<Studycodemodel.Iteamsignin>({

})

onMounted(() => {
    start()
})

async function start() {
    try {
        const data = await asyncselectsignin({
            _offset: offset.value,
            _limit: 20,
            issignin: 1,
            ...ruleForm,
            signinactivityid: p.ID
        });
        tableData.value = data.rows;
        count.value = data.count;
    } catch (e: any) {
        ElMessage.error(e);
    }
}

function handleCurrentChange(val: number) {
    offset.value = 20 * (val - 1);
}

const oredr = ref('ID')
const sortable = ref('DESC')
function sortchange(row: any) {
    const { prop, order } = row;
    if (order == "descending") {
        sortable.value = "DESC";
    } else {
        sortable.value = "ASC";
    }
    order.value = prop;
}

function formatter(updatedAt: string) {
    return toLocaleDateString(updatedAt);
}

const users = ref<Studycodemodel.Iuser[]>([])
function handleSelectionChange(data: Studycodemodel.Iuser[]) {
    users.value = data
}

const teams = ref<Studycodemodel.Iteam[]>([])
function handleSelectionteam(data: Studycodemodel.Iteam[]) {
    teams.value = data
}
</script>
  